<template>
	<view class='container'>
  <view class='prescribing_ul prescribing_ul_top'>
    <view class='prescribing_li title'>诊断</view>
    <view class='prescribing_li'>
      <text class='name'>选择病症</text>
      <view class='prescribing_li_right' @tap='start_chosesym'>
        <text class='name_right'>{{symptom}}</text>
        <text class='iconfont icon-left'></text>
      </view>
    </view>
    <view class='prescribing_li'>
      <input placeholder='请输入其他病症名称'></input>
    </view>
  </view>
  <!-- 诊断 -->
  <view class='prescribing_ul'>
    <view class='prescribing_li title'>
      <text class='name'>选择病症</text>
      <view class='prescribing_li_right'>
        <text class='iconfont icon-nanren'></text>
        <button class='obtain'>获取信息</button>
      </view>
    </view>
    <view class='prescribing_li'>
      <text class='name'>患者姓名</text>
      <view class='prescribing_li_right'>
         <input placeholder='请输入姓名'></input>
      </view>
    </view>
    <view class='prescribing_li'>
      <text class='name'>患者性别</text>
      <view class='prescribing_li_right'>
        <radio-group class="radio-group" @bindchange="radioChange">
          <label class="radio" v-for="(item,index) in items" :key='index' @tap="radioChange(index)">
            <radio :value="item.name" :checked="item.checked"  color='#108ec9'/>
            {{item.value}}
          </label>
        </radio-group>
      </view>
    </view>
    <view class='prescribing_li'>
      <text class='name'>患者年龄</text>
      <view class='prescribing_li_right'>
         <input placeholder='请输入患者年龄'></input>
      </view>
    </view>
  </view>
  <!-- 处方(R+) -->
  <view class='prescribing_ul'>
    <view class='prescribing_li title'>
      <text class='name'>处方(R+)</text>
      <view class='prescribing_li_right'>
         <view class='tab-left' v-for="(item,index) in nav" :key='index' @tap='prescribing(index)'>
          <text :class="navindex == index?'active':'' ">{{item.txt}}</text>
         </view>
      </view>
    </view>
    <view class='tab-right'>  
      <view class="right-item" v-if="navindex == '0'?'active' : ''">
        <view class="prescribing_li z_prescribing_li" v-for="(item,index) in own" :key='index' @tap='start_editor'>
          <!-- <text class='joint'>{{item.name}}</text>
          <text class='joint_name joint'>温水口服温水口服温水口服温水口服...</text>
          <view class='prescribing_li_right '>
            <text class=''>30mg*7片/盒</text>
            <text class='iconfont icon-left'></text>
          </view> -->
          <view class='drug_left'>
            <text class='drug_left_name joint'>{{item.name}}</text>
            <text>30mg*7片/盒</text>
          </view>
          <view class='drug_right'>
            <text>2盒</text>
            <text>饭后口服一次2粒，一日1次</text>
          </view>
          <text class='iconfont icon-left'></text>
        </view>
        <view class="prescribing_li prescribing_bianji" @tap='start_adddrug'>
            <text class='iconfont icon-bianji'></text>
            <text>编辑药品</text>
        </view>
      </view>
      <!-- 联合用药 -->
      <view class="right-item" v-if="navindex == '1'?'active' : ''">
        <view class='drug_list'  v-if="chosedrug">
          <view class="prescribing_li" v-for="(item,index) in joint" :key='index' @tap='start_chosedrug' >
            <text class='name'>{{item.name}}</text>           
          </view>
        </view>
        <view class='drug_list' v-if="!chosedrug">
           <view class="prescribing_li z_prescribing_li" v-for="(item,index) in jointlist" :key='index' wx:key="">
              <view class='drug_left'>
                <text class='joint drug_left_name'>{{item.name}}</text>
                <text>30mg*7片/盒</text>
              </view>
              <view class='drug_right'>
                <text>2盒</text>
                <text>饭后口服一次2粒，一日1次</text>
              </view>
              <text class='iconfont icon-left'></text>
            </view>
            <view class="prescribing_li prescribing_bianji">
                <text class='iconfont icon-bianji'></text>
                <text>编辑药品</text>
            </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 药店药品库 -->
  <view class='prescribing_ul'>
    <view class='prescribing_li title'>药店药品库</view>
    <view class='prescribing_li drug_li' v-for="(item,index) in drug" :key='index'>
      <view class='drug_left'>
        <text class='drug_left_name'>{{item.name}}</text>
        <text>30mg*7片/盒</text>
      </view>
      <view class='drug_right'>
        <text>陕西利君制药有限公司</text>
        <text>饭后口服，一次2粒，一日1次</text>
      </view>
    </view>
  </view>
  <!-- 生成处方 -->
  <button class='generate_button' @tap='start_generate'>生成处方</button>
</view>

</template>

<script>
	export default {
		data() {
			return {
			 items: [
				  {
				    name: 'male', value: '男' },
				  {
				    name: 'female', value: '女', checked: 'true' },
				],
				nav:[
				  { txt: '自备良方' },  
				  { txt: '联合用药' },  
				],
				navindex:0,
				own:[
				  { name: '账单账单账单账单账单账单账单账单账单账单账单账单账单账单账单账单账单账单账单账单账单账单' },
				  { name: '账单' },
				  { name: '账单' },
				  { name: '账单' },
				  { name:'账单'},
				],
				joint:[
				  { name: '盐酸吡格列酮+布洛芬胶囊+胃复安' },
				  { name: '盐酸吡格列酮+布洛芬胶囊+胃复安' },
				  { name:'盐酸吡格列酮+布洛芬胶囊+胃复安'},
				],
				// 药品库
				drug:[
				  { name: '布洛芬胶囊' },
				  { name: '布洛芬胶囊' },
				  { name: '布洛芬胶囊' },
				  { name:'布洛芬胶囊'},
				],
				chosedrug:true,//联合用药列表
				// 联合用药分类
				jointlist:[
				  { name: '盐酸吡格列酮' },
				  { name: '盐酸吡格列酮' },
				  { name: '盐酸吡格列酮' },
				  { name:'盐酸吡格列酮'},
				], 
				symptom:'',
				navid:'',
			}
		},

		computed: {
	 
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option); //打印出上个页面传递的参数。
	 
		},
		onShow() {
			var that = this;
			let pages = getCurrentPages();
			console.log(pages)
			let currPage = pages[pages.length - 1];
			console.log(currPage)
			this.symptom=currPage.data.navid

		},
		methods: {
			//自备良方  联合用药按钮
			prescribing(index){
				console.log(index)
				this.navindex=index
			},
			// 性别选择
			radioChange(index){
				console.log(index)
			},
			//修改自备良方药品
			start_editor(){
				uni.navigateTo({
					url: '../editor/editor'
				});
			},
			//添加药品
			start_adddrug(){
				uni.navigateTo({
					url: '../adddrug/adddrug'
				});
			},
			//生成处方
			start_generate(){
				uni.navigateTo({
					url: '../prescription/prescription'
				});
			},
			// 查看联合用药
			start_chosedrug(){
				console.log('查看联合用药')
				this.chosedrug=false
			},
			// 选择病症
			start_chosesym(){
				uni.navigateTo({
					url: '../symptoms/symptoms'
				});
			}
					
	 
		}
	}
 
</script>

<style>
	.prescribing_ul_top .prescribing_li{
  line-height: 90upx;
  height: 90upx; 
  padding: 0upx 30upx;
}
.prescribing_li{
  /* line-height: 90upx;
  height: 90upx; */
  padding: 15upx 30upx;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  font-size: 28upx;
  align-items: center;
  color:#666;
}
.prescribing_ul .title{
  line-height: 90upx;
  height: 90upx; 
  background: #f9fcfd;
  font-weight: 600;
  font-size: 30upx;
  padding: 0 30upx;
}
.prescribing_li .prescribing_li_right{
  display: flex;
  align-items: center;
}
.prescribing_li .icon-left{
  color: #aeaeae;
  padding-left: 15upx;
}
.prescribing_li .name{
  color:#666666;
  white-space: nowrap;
}
.prescribing_li .prescribing_li_right .name_right{
  color: #108ec9
}
.prescribing_li input{
  line-height: 90upx;
  height: 90upx;
  color: #666666
}
.right-item .z_prescribing_li .drug_right{
  width: 60%
}
/* 诊断 */
.prescribing_ul .title .prescribing_li_right{
  font-weight: normal;
}
.prescribing_li .prescribing_li_right input{
  text-align: right;
}
.prescribing_li .prescribing_li_right  .icon-nanren{
  color: #108ec9;
  font-size: 50upx;
}
.prescribing_li .prescribing_li_right button.obtain{
  color: #108ec9;
  border: 1px solid #108ec9;
  font-size: 28upx;
  padding: 0;
  width: 160upx;
  margin-left: 18upx;
  border-radius: 10upx;
}
.prescribing_li .joint{
  width: 200upx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prescribing_li .joint_name{
  padding: 0 10upx;
   width: 160upx;
   color: #666666
}
.prescribing_li_right .tab-left text{
  border: 1px solid #cccccc;
  color: #108ec9;
  width: 120upx;
  line-height: 50upx;
  height: 50upx;
  display: inline-block;
  text-align: center;
  font-size: 24upx;
  border-radius: 15upx;
 background: #fff
}
.prescribing_li_right .tab-left:first-child{
  margin-right: -20upx;
 
}
.prescribing_li_right .tab-left:last-child{
  padding-left:15upx;
}
.prescribing_li_right .tab-left .active{
  color: #fff;
  background: #108ec9;
  border-color: #108ec9;
}
.tab-right .prescribing_bianji{
  line-height: 90upx;
  height: 90upx;
  display: flex;
  justify-content: center;
  color: #108ec9;
  font-size: 32upx;
  padding: 0;
}
.tab-right .prescribing_bianji .iconfont{
  font-weight: 600;
  font-size: 38upx;
  padding-right: 20upx;
}
/* 药品库 */
.drug_li{
  height: auto;
  color: #666;
  font-size: 28upx;
  padding: 15upx 30upx;
}
.prescribing_li .drug_left{
  display: flex;
  flex-direction: column;
  width: 30%;
}
.prescribing_li .drug_left text{
  line-height: 60upx;
  height: 60upx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;

}
.prescribing_li .drug_right{
  display: flex;
  flex-direction: column;
  width: 70%;
  padding-left: 55upx;
  box-sizing: border-box;

}
.prescribing_li .drug_right text{
  height: 60upx;
  line-height: 60upx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}
.drug_left_name{
  color: #108ec9;
  font-size: 32upx;
}
.generate_button{
  margin: 40upx 60upx;
  background: #108ec9;
  line-height: 85upx;
  height: 85upx;
  color: #fff;
  font-size: 30upx;
}
</style>
